<template>
  <!-- 我的党费缴纳页面 -->
  <div class="mydues">
    <div class="zhuangtai">
      <el-select @clear="onclear" class="isfee_select" v-model="duesarr.ispay" clearable placeholder="是否缴费">
        <el-option v-for="item in payList" :key="item.id" :label="item.value" :value="item.id"></el-option>
      </el-select>
      <el-button type="primary" @click="query">查询</el-button>
    </div>
    <el-table class="mydues_table" :data="myduesList.slice((currentPage-1)*pageSize,currentPage*pageSize)" height="560" border style="width: 100%">
      <el-table-column prop="theme" label="缴费主题">
      </el-table-column>
      <el-table-column prop="feeStartTime" label="开始时间">
      </el-table-column>
      <el-table-column prop="feeEndTime" label="截止时间">
      </el-table-column>
      <el-table-column prop="cost" label="费用">
      </el-table-column>
      <el-table-column prop="createTime" label="发起时间">
      </el-table-column>
      <el-table-column prop="isFee" label="缴费状态">
      </el-table-column>
    </el-table>
    <div class="paginationBlock">
      <el-pagination  @size-change="handleSizeChange"
      @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize"
      layout="total,prev, pager, next,jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      myduesList:[],//我的党费缴纳列表
      currentPage:1,
      pageSize:6,
      total:0,
      duesarr:{
        ispay:"",//用户选择的缴费状态
      },
      payList:[
        {
          id:"1",
          value:"已缴费"
        },{
          id:"0",
          value:"未缴费"
        }
      ],
    }
  },
  mounted(){
    this.mydueslists()
  },
  methods:{
    handleCurrentChange(val){//点击获取页码(党员缴纳列表)
      this.currentPage1 = val
      this.mydueslists()
      this.currentPage = 1
    },
    handleSizeChange(val) {//党员缴纳列表分页
      this.pageSize1 = val
      this.currentPage1 = 1
    },
    mydueslists(){//获取我的缴费列表
      this.axios({
        headers:{'Authentication':localStorage.getItem('token')},
        method:"get",
        // url:"api/fee/getUserFeeList",
        url:`/fee/getUserFeeList?pageNum=${this.currentPage}&pageSize=${this.pageSize}`,
      }).then(res=>{
        // console.log(res)
        if(res.data.code != 20001){
          return this.$message.error(res.data.msg)
        }
        this.myduesList = res.data.data.list
        // console.log(this.myduesList)
        for(var i=0;i<this.myduesList.length;i++){
          if(this.myduesList[i].isFee==0){
            this.myduesList[i].isFee = "未缴费"
          }else if(this.myduesList[i].isFee==1){
            this.myduesList[i].isFee = "已缴费"
          }
        }
      })
    },
    query(){//点击查询按钮
      // console.log(this.duesarr.ispay)
      this.axios({
        headers:{'Authentication':localStorage.getItem('token')},
        method:"get",
        // url:`/fee/getUserFeeList?是否缴费=${this.duesarr.ispay}`,
        url:`/fee/getUserFeeList?是否缴费=${this.duesarr.ispay}`,
      }).then(res=>{
        // console.log(res)
        this.myduesList = res.data.data.list
        for(var i=0;i<this.myduesList.length;i++){
          if(this.myduesList[i].isFee==0){
            this.myduesList[i].isFee = "未缴费"
          }else if(this.myduesList[i].isFee==1){
            this.myduesList[i].isFee = "已缴费"
          }
        }
      })
    },
    onclear(){//清空下拉框中的内容
      this.mydueslists()
    },
  }
}
</script>

<style lang="scss">
  .mydues{
    .paginationBlock{
      position: absolute;
      bottom: 5vh;
      left: 0;
      width: 100%;
      // border: 1px solid #000;
    }
    .el-pagination{
      text-align: center;
    }
    .mydues_table{
      margin-top: 3vh;
    }
    .zhuangtai{
      .isfee_select{
        margin-right: 2vw;
      }
    }
    .el-pager li{
      background: none;
    }
    .btn-next,.btn-prev{
      background: none;
    }
  }
</style>